import React, { useRef, useState } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import Swiper from 'react-native-swiper';
import { WebView } from 'react-native-webview';
import Swipeout from 'react-native-swipeout';
import { Video } from 'expo-av';
import { Audio } from 'expo-av';

const swipeoutBtns = [
  {
    text: '取消关注',
    onPress: () => { },
    type: 'secondary',//default,delete, primary, secondary
    disabled: false
  },
  {
    component: <Button title='删除' />,
  },
  {
    text: '删除',
    color: '#000',
    backgroundColor: '#ccc',
  },
]
const Home = () => {
  const video = useRef(null);
  const [status, setStatus] = useState({});
  const [sound, setSound] = useState();
  // 一进去就播放，相当于是背景音乐，没有下面的Play Sound按钮和playSound函数
  useEffect(async()=>{
    const { sound } = await Audio.Sound.createAsync(
      require('../assets/危险派对.mp3')
    );
    // setSound(sound);
    await sound.playAsync();
    // 跳走的时候是可以拿到111打印出来的，页面离开的时候可以拿到的事件
    navigation.addListener('blur',()=>{
      console.log('1111');
      // 离开页面就停止播放
      sound.pauseAsync();
    })
  })
  const playSound = async () => {
    const { sound } = await Audio.Sound.createAsync(
      require('../assets/危险派对.mp3')
    );
    setSound(sound);
    await sound.playAsync();
  }

  return <View style={{ width: '100%', height: 900 }}>
    <View style={{ height: 350 }}>
      <Button title="Play Sound" onPress={playSound} />
    </View>
    <View style={{ height: 350 }}>
      <Video
        ref={video}
        style={{ height: 300 }}
        source={{
          uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={status => {
          setStatus(() => status)
        }
        }
      />
      <Button
        title={status.isPlaying ? 'Pause' : 'Play'}
        onPress={() =>
          status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
        }
      />
    </View>

  </View>
}
const styles = StyleSheet.create({
  wrapper: {
    height: 200,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: '500',
    textAlign: 'center'
  }
})
export default Home;